<template>
  <el-header style="background-color: lightgray; text-align: right; font-size: 12px; height: 100px;">
    <h1 style="font-size: 30px; text-align: left;">检查申请</h1>
    <div>系统希望您不再是本系统受众，并提醒您务必谨遵医嘱</div>
  </el-header>

  <el-form>
    <el-form-item>
      <el-input style="width: 200px; margin-left: 20px;" v-model="optionNames.name" placeholder="请输入关键词" />
      <el-button type="primary" @click="search()">搜索</el-button>
      <el-select style="width: 200px; margin-left: 20px;" v-model="optionNames.name" placeholder="请选择"></el-select>
    </el-form-item>
  </el-form>

  <el-main>
    <el-tag type="primary" style="width: 200px; margin-left: 20px;">当前共{{ checkRequests.length }}位需要做该项检查</el-tag>
    <div class="card-container">
      <el-card
        v-for="request in checkRequests"
        :key="request.id"
        class="check-request-card"
      >
        <div class="card-header">
          <h3>检查信息</h3>
        </div>
        <el-form :model="request" class="card-form" style="display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10px;">
    <el-tag v-if="request.registerId" style="width: 100px;" type="info">患者id：{{ request.registerId }}</el-tag>
    <el-tag v-if="request.checkEmployeeId" type="info">检查医生id：{{ request.checkEmployeeId }}</el-tag>
    <el-tag v-if="request.inputcheckEmployeeId" type="success">输入结果医生id：{{ request.inputcheckEmployeeId }}</el-tag>
    <el-tag v-if="request.medicalTechnologyId" style="width: 200px;" type="success">检查项目id：{{ request.medicalTechnologyId }}</el-tag>
    <el-tag v-if="request.checkInfo" style="width: 200px;height: 100px;" type="warning">检查目的：{{ request.checkInfo }}</el-tag>
    <el-tag v-if="request.checkPosition" style="width: 150px;" type="primary">检查位置：{{ request.checkPosition }}</el-tag>
    <el-tag v-if="request.creationTime" type="danger">检查创建时间{{  (request.creationTime) }}</el-tag>
    <el-tag v-if="request.checkTime" type="warning">开立检查时间:{{ (request.checkTime) }}</el-tag>
    <el-tag v-if="request.checkResult" type="primary">检查结果：{{ request.checkResult }}</el-tag>
    <el-tag v-if="request.checkState" type="danger">检查状态：{{ request.checkState }}</el-tag>
    <el-tag v-if="request.checkRemark" type="info">检查备注：{{ request.checkRemark }}</el-tag>
  </el-form>
        <div class="card-actions">
          <el-button type="primary" @click="viewDetails(request)">查看详情</el-button>
          <el-button type="success" @click="startCheck(request)">开始检查</el-button>
          <el-button type="danger" @click="cancelCheck(request)">取消检查</el-button>
        </div>
      </el-card>
    </div>
  </el-main>
</template>

<script lang="ts" setup name="CheckRequestNormal">
import axiosInstance from '@/utils/axiosUtils';
import { reactive, ref } from 'vue';
import router from '@/router';
// 定义检查请求对象
const checkRequests = ref([]);

const getCheckRequestNormal = () => {
  axiosInstance.get('/api/checkRequest/selectCheckRequestsNormal').then(res => {
    checkRequests.value = res.data;
  });
};

const optionNames = reactive({
  name: null,
});

const search = () => {
  getCheckRequestNormal();
};

const viewDetails = (request) => {
  console.log('查看详情:', request);
}; 

const startCheck = (request) => {
 router.push({name:'checkIn',query:{registerId:request.registerId}})
  console.log('开始检查:', request);
};

const cancelCheck = (request) => {
  console.log('取消检查:', request);
  router.push({name:'checkRequestNormal'})
};

// 初始化时获取数据
getCheckRequestNormal();
</script>

<style scoped>
h1 {
  padding-left: 30px;
}

.card-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 均匀分布卡片间距 */
  gap: 20px; /* 设置卡片之间的间距 */
}

.check-request-card {
  width: calc(49% - 20px); /* 设置卡片的宽度为 49% 减去间距，形成较好的 7:5 比例 */
  margin-bottom: 20px; /* 为卡片底部添加间距 */
}

.card-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between; /* 将标题和描述在卡片顶部均匀分布 */
}

.card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between; /* 将按钮在卡片底部均匀分布 */
}
</style>
